<template>
	<view class='sweetWrap'>
		<page-header :headInfo="headInfo"></page-header>
		<anniver-toast :annInfo="info" @FcloseToast="exitToast" v-if="isToast"></anniver-toast>
		<view class='sweetInfo'>
			<view class="anniverCon">
				<view>{{info.title}}</view>
				<view>{{info.bind_time}}<text>天</text></view>
				<view><text>起始日</text>{{info.date}}</view>
			</view>
			<view class="anniverbtn">
				<button open-type='share'>
					<view><text class="iconfont icon-zhuanfa"></text></view>
					<view>转发</view>
				</button>
				<view @tap="exitToast">
					<view><text class="iconfont icon-bianji"></text></view>
					<view>编辑</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import anniverToast from '@/components/anniver/anniver-toast.vue';
	export default {
		components: {
			anniverToast
		},
		data() {
			return {
				headInfo: {
					type: 1,
					title: '',
				},
				id:'',
				info: {
					date: ''
				},
				isToast: false
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.anniverInfo(option.id);
		},
		onShow() {
			
		},
		methods: {
			/**
			 * @author smallfour
			 * @description 纪念日详情
			 */
			anniverInfo: function(id) {
				this.$api.anniverInfo({
					id: id
				}).then(res => {
					if (res.code == 200) {
						this.info = res.data;
					}
				})
			},

			/**
			 * @author smallfour
			 * @description 打开关闭纪念日
			 */
			exitToast: function() {
				this.isToast = this.isToast ? false : true;
				if(!this.isToast){
					this.anniverInfo(this.id);
				}
			}
		},

		// 分享
		onShareAppMessage() {
			//默认参数
			let share_title = '来恋爱吧~'
			let path = "/pages/index/index";
			return {
				title: share_title,
				path: path
			}
		}
	}
</script>

<style lang="scss">
	.sweetWrap {
		width: 100%;
		height: 100vh;
		background: linear-gradient(to bottom, #f8aadc, #f485b0);
		color: #fff;

		.sweetInfo {
			position: absolute;
			width: 84%;
			left: 8%;
			bottom: 10%;
		}
	}

	.status_bar,
	.top_view {
		background: #f8b4e1 !important;
	}

	.headerCon {
		background: linear-gradient(to bottom, #f8b4e1, #f7a6d7) !important;

	}

	.anniverCon {
		view:nth-child(1) {
			font-size: 42rpx;
			padding: 40rpx 0;
		}

		view:nth-child(2) {
			// font-weight: bold;
			font-size: 80rpx;
			padding-bottom: 80rpx;

			text {
				font-weight: normal;
				margin-left: 20rpx;
			}
		}

		view:nth-child(3) {
			font-size: 30rpx;
		}

		text {
			font-size: 34rpx !important;
		}
	}

	.anniverbtn {
		padding-top: 200rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;


	}

	.anniverbtn>view>view:nth-child(1),
	.anniverbtn>button>view:nth-child(1) {
		text-align: center;
		background: #fff;
		color: #333333;
		box-shadow: 0 0 10rpx #999;
		height: 100rpx;
		width: 100rpx;
		line-height: 100rpx;
		border-radius: 50%;
		margin-left: 30rpx;

		text {
			font-size: 40rpx;
			font-weight: bold;
		}
	}

	.anniverbtn>button{
		padding: 0;
		line-height: 1;
		background-color: inherit;
		color: #fff;
		margin: 0 30rpx 0 0;

	}

	button::after {
		width:0%;
		display: none;
	}

	.anniverbtn>view>view:nth-child(2),
	.anniverbtn>button>view:nth-child(2) {
		margin-top: 16rpx;
		margin-left: 30rpx;
		text-align: center;
		font-size: 32rpx;
	}
</style>
